<script lang="ts" setup>
import { useRouter } from "vue-router"
import { storeToRefs } from "pinia"
import { computed, reactive, ref } from "vue"
import { useAppStore } from "@/store/modules/app"
import { useSettingsStore } from "@/store/modules/settings"
import { useUserStore } from "@/store/modules/user"
import { UserFilled } from "@element-plus/icons-vue"
import Hamburger from "../Hamburger/index.vue"
import Breadcrumb from "../Breadcrumb/index.vue"
import Sidebar from "../Sidebar/index.vue"
import Notify from "@/components/Notify/index.vue"
import ThemeSwitch from "@/components/ThemeSwitch/index.vue"
import Screenfull from "@/components/Screenfull/index.vue"
import SearchMenu from "@/components/SearchMenu/index.vue"
import { useDevice } from "@/hooks/useDevice"
import { useLayoutMode } from "@/hooks/useLayoutMode"
// import AusAuthSdk from "aus-auth-sdk" // 最新版本aus-auth-sdk@1.0.13

import { ElMessage } from "element-plus"
import { changePwd } from "@/api/user"

//实例化对象
//const ausDetermineToken = new AusAuthSdk.DetermineToken()
const { isMobile } = useDevice()
const { isTop } = useLayoutMode()
const router = useRouter()
const appStore = useAppStore()
const userStore = useUserStore()
const settingsStore = useSettingsStore()
const { showNotify, showThemeSwitch, showScreenfull, showSearchMenu } = storeToRefs(settingsStore)

/** 切换侧边栏 */
const toggleSidebar = () => {
  appStore.toggleSidebar(false)
}

const pwdRefs = ref()
const rules = ref({
  newPassword: [{ required: true, min: 8, max: 16, message: "请输入8-16位密码", trigger: "blur" }],
  oldPassword: [{ required: true, min: 8, max: 16, message: "请输入8-16位密码", trigger: "blur" }]
})
const userPwd = reactive({
  oldPassword: "",
  newPassword: "",
  dialog: false
})
const editPwd = () => {
  userPwd.oldPassword = ""
  userPwd.newPassword = ""
  userPwd.dialog = true
}

const comfirmPwd = () => {
  pwdRefs.value.validate((valid) => {
    if (valid) {
      const params = {
        username: userStore.username,
        oldPassword: userPwd.oldPassword,
        newPassword: userPwd.newPassword
      }
      changePwd(params).then((res) => {
        const { code } = res.data
        if (code === 200) {
          ElMessage.success("修改成功")
          userPwd.dialog = false
          pwdRefs.value?.resetFields()
        }
      })
    } else {
      return false
    }
  })
}

/** 登出 */
const logout = () => {
  userStore.logout()
  router.push("/login")
  // const ausUrl = "http://11.33.25.153:18888"
  // const ausSeverUrl = "http://11.33.25.153:48080"
  // const appId = "cb3fe9cc9f084dc7ae6dbc01a72a7162" // sdk-js应用
  // // const token = "" // 当token有值时，优先校验传进来的token，没值时会读取local的ausToken进行校验
  // // const noReturnUserInfo = true
  // // const ausUrl = "http://192.168.0.11:4888" // 必填项，aus平台地址，ip+port，例如：http://127.0.0.1:8800，http://127.0.0.1:8800/#/
  // // const ausSeverUrl = "http://192.168.0.11:48080" // aus后端服务地址，ip+port，例如：http://127.0.0.1:8800
  // // const appId = "91a280abac1f4a1491dbb0735f75c09a" //必填项， 对应 应用详情--认证配置--d端点信息里面的App ID
  // const token = localStorage.getItem("ausToken")
  // const redirectPath = "" // 非必填，退出登录后，重新登录的重定向地址
  // ausDetermineToken.logoutAus(ausUrl, ausSeverUrl, appId, token, redirectPath)
  // localStorage.removeItem("aususerName")
}
const username = computed(() => userStore.username)
</script>

<template>
  <div class="navigation-bar">
    <Hamburger
      v-if="!isTop || isMobile"
      :is-active="appStore.sidebar.opened"
      class="hamburger"
      @toggle-click="toggleSidebar"
    />
    <Breadcrumb v-if="!isTop || isMobile" class="breadcrumb" />
    <Sidebar v-if="isTop && !isMobile" class="sidebar" />
    <div class="right-menu">
      <el-dropdown class="right-menu-item">
        <div class="right-menu-avatar">
          <el-avatar :icon="UserFilled" :size="30" class="avatar-icon" />
          <span>{{ username }}</span>
        </div>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item divided @click="editPwd">
              <span style="display: block">修改密码</span>
            </el-dropdown-item>
            <el-dropdown-item divided @click="logout">
              <span style="display: block">退出登录</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
    <!-- <div class="right-menu">
      <SearchMenu v-if="showSearchMenu" class="right-menu-item" />
      <Screenfull v-if="showScreenfull" class="right-menu-item" />
      <ThemeSwitch v-if="showThemeSwitch" class="right-menu-item" />
      <Notify v-if="showNotify" class="right-menu-item" />
      <el-dropdown class="right-menu-item">
        <div class="right-menu-avatar">
          <el-avatar :icon="UserFilled" :size="30" />
          <span>{{ userStore.username }}</span>
        </div>
        <template #dropdown>
          <el-dropdown-menu>
            <a target="_blank" href="https://github.com/un-pany/v3-admin-vite">
              <el-dropdown-item>GitHub</el-dropdown-item>
            </a>
            <a target="_blank" href="https://gitee.com/un-pany/v3-admin-vite">
              <el-dropdown-item>Gitee</el-dropdown-item>
            </a>
            <el-dropdown-item divided @click="logout">
              <span style="display: block">退出登录</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div> -->
    <!-- 密码设置 -->
    <el-dialog v-model="userPwd.dialog" title="修改密码" width="400">
      <el-form :model="userPwd" :rules="rules" label-width="80px" ref="pwdRefs">
        <!-- <el-form-item label="用户名：">
          <el-input v-model="username" disabled />
        </el-form-item> -->
        <el-form-item label="旧密码：" prop="oldPassword">
          <el-input v-model="userPwd.oldPassword" show-password />
        </el-form-item>
        <el-form-item label="新密码：" prop="newPassword">
          <el-input v-model="userPwd.newPassword" show-password />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <!-- <el-button @click="cancle">取消</el-button> -->
          <el-button type="primary" @click="comfirmPwd"> 确认 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
.navigation-bar {
  height: var(--v3-navigationbar-height);
  overflow: hidden;
  color: var(--v3-navigationbar-text-color);
  display: flex;
  justify-content: space-between;
  .hamburger {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 15px;
    cursor: pointer;
  }
  .breadcrumb {
    flex: 1;
    // 参考 Bootstrap 的响应式设计将宽度设置为 576
    @media screen and (max-width: 576px) {
      display: none;
    }
  }
  .sidebar {
    flex: 1;
    // 设置 min-width 是为了让 Sidebar 里的 el-menu 宽度自适应
    min-width: 0px;
    :deep(.el-menu) {
      background-color: transparent;
    }
    :deep(.el-sub-menu) {
      &.is-active {
        .el-sub-menu__title {
          color: var(--el-color-primary) !important;
        }
      }
    }
  }
  .right-menu {
    margin-right: 10px;
    height: 100%;
    display: flex;
    align-items: center;
    .right-menu-item {
      padding: 0 10px;
      cursor: pointer;
      .right-menu-avatar {
        display: flex;
        align-items: center;
        .el-avatar {
          margin-right: 10px;
        }
        .avatar-icon {
          background: linear-gradient(160deg, #48ccff 0%, #0048f3 100%);
        }
        span {
          font-size: 16px;
        }
      }
    }
  }
}
</style>
